<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图片放大 | Beiysd</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/assets/logo/pkp.png">
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?345ab2bf830dc5c68a96925eb1dd0b45";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Live and Study.">
    
    <link rel="preload" href="/assets/css/0.styles.6ea22478.css" as="style"><link rel="preload" href="/assets/js/app.a6aeaf4b.js" as="script"><link rel="preload" href="/assets/js/3.64834d1f.js" as="script"><link rel="preload" href="/assets/js/2.ff1c91b7.js" as="script"><link rel="preload" href="/assets/js/50.3198d61d.js" as="script"><link rel="preload" href="/assets/js/4.ab2b8853.js" as="script"><link rel="prefetch" href="/assets/js/10.89cb0454.js"><link rel="prefetch" href="/assets/js/11.3c794522.js"><link rel="prefetch" href="/assets/js/12.70440dbd.js"><link rel="prefetch" href="/assets/js/13.a3e0d1ac.js"><link rel="prefetch" href="/assets/js/14.310331e8.js"><link rel="prefetch" href="/assets/js/15.917355d8.js"><link rel="prefetch" href="/assets/js/16.40c023c5.js"><link rel="prefetch" href="/assets/js/17.dd831ef0.js"><link rel="prefetch" href="/assets/js/18.ebdfa913.js"><link rel="prefetch" href="/assets/js/19.978a3d4f.js"><link rel="prefetch" href="/assets/js/20.a1b302ec.js"><link rel="prefetch" href="/assets/js/21.c0c880e4.js"><link rel="prefetch" href="/assets/js/22.7c5ac0b7.js"><link rel="prefetch" href="/assets/js/23.9b601e1c.js"><link rel="prefetch" href="/assets/js/24.e020a25c.js"><link rel="prefetch" href="/assets/js/25.9d1a3fda.js"><link rel="prefetch" href="/assets/js/26.5b32b9fb.js"><link rel="prefetch" href="/assets/js/27.2fd55a87.js"><link rel="prefetch" href="/assets/js/28.c336622c.js"><link rel="prefetch" href="/assets/js/29.fd5ef2b6.js"><link rel="prefetch" href="/assets/js/30.3b1b491b.js"><link rel="prefetch" href="/assets/js/31.048b84dc.js"><link rel="prefetch" href="/assets/js/32.88d25b63.js"><link rel="prefetch" href="/assets/js/33.6b1952ec.js"><link rel="prefetch" href="/assets/js/34.469388d0.js"><link rel="prefetch" href="/assets/js/35.b67fdcd0.js"><link rel="prefetch" href="/assets/js/36.305b637c.js"><link rel="prefetch" href="/assets/js/37.2ee28610.js"><link rel="prefetch" href="/assets/js/38.12b3959d.js"><link rel="prefetch" href="/assets/js/39.ed39eb41.js"><link rel="prefetch" href="/assets/js/40.2a6acc73.js"><link rel="prefetch" href="/assets/js/41.c37ffdf8.js"><link rel="prefetch" href="/assets/js/42.57e70b87.js"><link rel="prefetch" href="/assets/js/43.880bf4e4.js"><link rel="prefetch" href="/assets/js/44.e1504ed4.js"><link rel="prefetch" href="/assets/js/45.30812643.js"><link rel="prefetch" href="/assets/js/46.b44de4d6.js"><link rel="prefetch" href="/assets/js/47.8f633147.js"><link rel="prefetch" href="/assets/js/48.f8ce50f4.js"><link rel="prefetch" href="/assets/js/49.5668e7cc.js"><link rel="prefetch" href="/assets/js/5.a3a48344.js"><link rel="prefetch" href="/assets/js/51.dc58139c.js"><link rel="prefetch" href="/assets/js/52.dd6dcfc6.js"><link rel="prefetch" href="/assets/js/53.4dd5b87e.js"><link rel="prefetch" href="/assets/js/54.ed639bae.js"><link rel="prefetch" href="/assets/js/55.545687a2.js"><link rel="prefetch" href="/assets/js/56.1db2fab6.js"><link rel="prefetch" href="/assets/js/57.32871085.js"><link rel="prefetch" href="/assets/js/58.1630947d.js"><link rel="prefetch" href="/assets/js/59.210561f5.js"><link rel="prefetch" href="/assets/js/6.f6e0bbd8.js"><link rel="prefetch" href="/assets/js/60.ac25606d.js"><link rel="prefetch" href="/assets/js/61.0b5b2239.js"><link rel="prefetch" href="/assets/js/62.4aa32f98.js"><link rel="prefetch" href="/assets/js/63.7b452908.js"><link rel="prefetch" href="/assets/js/64.db0b2f6c.js"><link rel="prefetch" href="/assets/js/65.d79f0ce2.js"><link rel="prefetch" href="/assets/js/7.9e43e34d.js"><link rel="prefetch" href="/assets/js/8.d465c4bb.js"><link rel="prefetch" href="/assets/js/9.67e76cb1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6ea22478.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/logo/pkq.png" alt="Beiysd" class="logo"> <span class="site-name can-hide">Beiysd</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://github.com/Beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/beiysd" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://blog.csdn.net/weixin_40532650" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>常用方法</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Vuepress</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/notes/10-前端/50-Vuepress/10-注意事项.html" class="sidebar-link">10-注意事项</a></li><li><a href="/notes/10-前端/50-Vuepress/代码块复制.html" class="sidebar-link">代码块复制</a></li><li><a href="/notes/10-前端/50-Vuepress/全局搜索.html" class="sidebar-link">全局搜索</a></li><li><a href="/notes/10-前端/50-Vuepress/图片放大.html" class="active sidebar-link">图片放大</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/图片放大.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/图片放大.html#使用" class="sidebar-link">使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/图片放大.html#简单使用" class="sidebar-link">简单使用</a></li><li class="sidebar-sub-header"><a href="/notes/10-前端/50-Vuepress/图片放大.html#自定义选项" class="sidebar-link">自定义选项</a></li></ul></li></ul></li><li><a href="/notes/10-前端/50-Vuepress/样式更改.html" class="sidebar-link">样式更改</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Taro小程序</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>随笔</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂谈</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开发相关</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"><h3 class="page_title">图片放大</h3> <ul class="uls"><li title="标签" class="lis"><img src="/assets/img/tag.f21efeeb.svg" class="icons">
    </li> <li title="更新时间" class="lis"><img src="/assets/img/clock.ffb2d0be.svg" class="icons">2021-04-16
    </li> <li title="浏览人数" class="lis"><img src="/assets/img/eye.e9087eed.svg" class="icons">123
    </li></ul>  <div class="theme-default-content content__default"><h3 id="图片放大"><a href="#图片放大" class="header-anchor">#</a> 图片放大</h3> <p><a href="https://github.com/francoischalifour/medium-zoom" target="_blank" rel="noopener noreferrer">@vuepress/plugin-medium-zoom<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code>yarn add <span class="token operator">-</span><span class="token constant">D</span> @vuepress<span class="token operator">/</span>plugin<span class="token operator">-</span>medium<span class="token operator">-</span>zoom
# <span class="token constant">OR</span> npm install <span class="token operator">-</span><span class="token constant">D</span> @vuepress<span class="token operator">/</span>plugin<span class="token operator">-</span>medium<span class="token operator">-</span>zoom
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <h3 id="简单使用"><a href="#简单使用" class="header-anchor">#</a> 简单使用</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;@vuepress/plugin-medium-zoom&quot;</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="自定义选项"><a href="#自定义选项" class="header-anchor">#</a> 自定义选项</h3> <table><thead><tr><th>属性</th> <th>类型</th> <th>默认值</th> <th>描述</th></tr></thead> <tr><td>margin</td> <td>number</td> <td>0</td> <td>放大图像外的空间</td></tr> <tr><td>background</td> <td>string</td> <td>#fff</td> <td>叠加的背景</td></tr> <tr><td>scrollOffset</td> <td>number</td> <td>40</td> <td>要滚动以关闭缩放的像素数</td></tr> <tr><td>container</td> <td>string || HTMLElementobject</td> <td>null</td> <td>视图端口以显示放大</td></tr> <tr><td>template</td> <td>string|HTMLTemplateElement</td> <td>null</td> <td>缩放时显示的模板元素</td></tr></table></div> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/notes/10-前端/50-Vuepress/全局搜索.html" class="prev">
        全局搜索
      </a></span> <span class="next"><a href="/notes/10-前端/50-Vuepress/样式更改.html">
        样式更改
      </a>
      →
    </span></p></div>  <button>click</button> <div class="back_top_content" data-v-26f75736><!----></div></main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.a6aeaf4b.js" defer></script><script src="/assets/js/3.64834d1f.js" defer></script><script src="/assets/js/2.ff1c91b7.js" defer></script><script src="/assets/js/50.3198d61d.js" defer></script><script src="/assets/js/4.ab2b8853.js" defer></script>
  </body>
</html>
